<template>
    <div id="register">
        <img src="../logo.png"/>
        <form :model="formTop" v-if="changeSteps === 1">
            <fieldset class="store-info" style="border-color: transparent;">
              <h1 class="pt30" style="font-size: 24px;font-weight: normal;">注册</h1>
              <p class="f12 mt5" style="color: #A9A9A9">欢迎使用大好味来生鲜配送平台！</p>
              <view class="f15 mt10 mb10">手机号码</view>
              <view class='info-write flex align-center '>
                <i class='iconfont'>&#xe65f;</i>
                <input placeholder="请输入您的手机号" v-model="formTop.phone" maxlength="11"/>
              </view>
              <section class="mt10">
                <a href="../login/main">已有账号去登录</a>
              </section>
              <i-button class="mt10" type="success" i-class="fp-button" @click="nextStep">{{phoneText}}</i-button>
              <aside class="mt5">
                <i v-if="!icontrue" @click="icontrue = true" class="iconfont">&#xe7e2;</i>
                <i v-else @click="icontrue = false" class="iconfont" style="color: #22B14A">&#xe693;</i>
                <p>我已阅读并同意<a style="display: inline;">《大好味来服务协议》</a></p>
              </aside>
              <i class="iconfont close tc" @click="finishPassword">&#xe6e9;</i>
            </fieldset>
            <i-modal :visible="matters">
              <imageAuthentication :changeSteps="changeSteps" @getChangeSteps="getChangeSteps" :matters="matters" @matters="mattersStatus"></imageAuthentication>
              <i class="iconfont closes" @tap="matters = false">&#xe6e9;</i>
            </i-modal>
        </form>
        <form :model="formTop" v-else-if="changeSteps === 2 && formTop.phone !== ''">
          <fieldset class="store-info" style="border-color: transparent;">
            <h1 class="pt30" style="font-size: 24px;font-weight: normal;">短信验证</h1>
            <p class="f12 mt5" style="color: #A9A9A9">验证短信发送至{{formTop.phone}}</p>
            <input v-model="smsCode" class="mt10" placeholder="请输入短信验证码" type="text" maxlength="4" style="padding: 5px 0 5px 10px; border-radius: 3px; height: 40px; line-height: 40px;background: #F3F3F3; text-align: center;"/>
            <section class="mt10">
              <a v-if="showTime"><span style="color: #F95318">{{gainTime}}</span>秒后重新获取验证码</a>
              <a class="flex1 tr" style="color: #F95318;text-decoration: underline;">没收到短信?</a>
            </section>
            <button @tap="getNote" class="code-style f12">{{gain}}</button>
            <i-button class="mt10" type="success" i-class="fp-button" @tap="judgeSMS">{{SMStext}}</i-button>
            <aside class="mt10">
              <p class="f12">客服热线 400-8620-9533</p>
            </aside>
            <i class="iconfont close tc" @click="changeSteps = 1">&#xe6e9;</i>
          </fieldset>
        </form>
        <form :model="formTop" v-else-if="changeSteps === 3">
        <fieldset class="store-info" style="border-color: transparent;">
          <h1 class="pt30" style="font-size: 24px;font-weight: normal;">填写信息</h1>
          <p class="f12 mt5" style="color: #A9A9A9">填写个人相关信息便于找回密码</p>
          <view class="f15 mt10 mb10">姓名</view>
          <view class='info-write flex align-center '>
            <i class='iconfont'>&#xe662;</i>
            <input type="password" placeholder="请输入您姓名" v-model="formTop.userName" maxlength="11"/>
          </view>
          <view class="f15 mt10 mb10">密码</view>
          <view class='info-write flex align-center '>
            <i class='iconfont'>&#xe65f;</i>
            <input type="password" placeholder="请设置您的登录密码" v-model="formTop.password" maxlength="11"/>
          </view>
          <view class="f15 mt10 mb10">确认密码</view>
          <view class='info-write flex align-center '>
            <i class='iconfont'>&#xe65f;</i>
            <input type="password" placeholder="请再次输入密码" v-model="formTop.repassword" maxlength="11"/>
          </view>
          <section class="mt10">
            <a>密码必须由6-12位数字或者字母组成!</a>
          </section>
          <i-button class="mt10" type="success" i-class="fp-button" @click="judgePassword">{{judgeassword}}</i-button>
          <i class="iconfont close tc" @click="changeSteps = 2">&#xe6e9;</i>
        </fieldset>
        <i-modal :visible="passwordmodeal">
          <div class="pr tl" style="padding: 0 25px;">
            <img v-if="updatasMounts === 0" src="../success.png"/>
            <img v-else-if="updatasMounts === 1" src="../faile.png"/>
            <img  v-else src="../notice.png"/>
            <h1 class="pt30 tc" style="font-size: 23px;font-weight: bold;">{{updataStatus[updatasMounts].status}}</h1>
            <p class="f12 tc" style="color: #A5A5A5">{{updataStatus[updatasMounts].statusContext}}</p>
            <i-button class="mt10" type="success" i-class="fp-button" @click="finishPassword">关闭</i-button>
          </div>
          <i class="iconfont closes" @tap="passwordmodeal = false">&#xe6e9;</i>
        </i-modal>
      </form>
    </div>
</template>

<script type="ECMAScript 6">
    import imageAuthentication from '@/components/image-authentication';
    export default {
        name: 'find-password',
        components: {
          imageAuthentication
        },
        data () {
            return {
                icontrue: false,
                changeSteps: 1,
                matters: false,
                formTop: { phone: '', repassword: '', password: '',userName: ''},
                phoneText: '下一步',
                code: new Array(4),
                gain: '重新获取',
                codeId: ['first', 'second', 'third', 'forth'],
                smsCode: '',
                gainTime: 60,
                showTime: false,
                updatasMounts: 0,
                SMStext: '下一步',
                showVerification: false,
                judgeassword: '完成',
                passwordmodeal: false,
                updataStatus: [{status: '修改完成', statusContext: '手机已修改为152855477492'}, {status: '修改失败', statusContext: '原手机短信验证失败'}, {status: '权限不够', statusContext: '修改密码需要原账户权限'}]
            };
        },
      watch: {
        code: function (newValue, oldValue) {
          let tempValue = '';
          for (let i = 0; i < newValue.length; i++) {
            if (i === 4) {
              console.log(i);
              break;
            }
            if (newValue[i]) {
              tempValue = tempValue + newValue[i];
            }
          }
          this.smsCode = tempValue;
          let m = tempValue.split('');
          let location = 0;
          for (let i = 0; i < newValue.length; i++) {
            if (m[i] && i < 4) {
              location++;
              newValue[i] = m[i];
            } else {
              newValue[i] = '';
            }
          }
          // console.log(this.codeId[i])
          if (location < 1) {
            location = 1;
          } else if (location > 4) {
            location = 4;
          }
          switch (this.codeId[location-1]){
            case 'first':
              this.$nextTick(() => {
                this.$refs.first.focus();
              });
              break;
            case 'second':
              this.$nextTick(() => {
                this.$refs.second.focus();
              });
              break;
            case 'third':
              this.$nextTick(() => {
                this.$refs.third.focus();
              });
              break;
            case 'forth':
              this.$nextTick(() => {
                this.$refs.forth.focus();
              });
              break;
          }
        },
        gainTime: function (newValue, oldValue) {
          if (this.showTime && newValue > 0) {
            setTimeout(() => {
              newValue--;
              this.gainTime = newValue;
            }, 1000);
          } else {
            this.showTime = false;
            this.gainTime = 60;
          }
          }
        },
      onReady () {
        this.changeSteps = 1;
      },
      methods: {
          // 修改密码验证
          judgePassword () {
            var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
            this.judgeassword = '正在验证密码···';
            setTimeout(() => {
              if (this.formTop.password === '') {
                wx.showToast({
                  title: '密码不能为空！',
                  duration: 2000,
                  icon: 'none'
                });
              } else if (!reg.test(this.formTop.password)) {
                wx.showToast({
                  title: '密码必须由6-12位数字或者字母组成！',
                  duration: 2000,
                  icon: 'none'
                });
              } else if (this.formTop.repassword !== this.formTop.password) {
                wx.showToast({
                  title: '两次密码输入不一样！',
                  duration: 2000,
                  icon: 'none'
                });
              } else {
                this.passwordmodeal = true;
              }
              this.judgeassword = '完成';
            }, 2000);
          },
          // 短信验证码判断
          judgeSMS () {
            this.SMStext = '短信验证码校验中···';
            setTimeout(() => {
              if (this.smsCode === '') {
                wx.showToast({
                  title: '未输入验证码！',
                  duration: 2000,
                  icon: 'none'
                });
              } else if (this.smsCode === '1234') {
                this.changeSteps ++;
              } else {
                wx.showToast({
                  title: '短信验证码错误！',
                  duration: 2000,
                  icon: 'none'
                });
              }
              this.SMStext = '下一步';
            }, 2000);
        },
          // 返回界面
          returnLogin () {
              this.$router.push('/login');
          },
          finishPassword () {
            wx.navigateBack({ delta: 1 });
          },
          // 获取图片验证码步骤
          getChangeSteps (data) {
            this.changeSteps = data;
          },
          mattersStatus (data) {
            this.matters = data;
          },
          // 手机号验证
          nextStep () {
            this.phoneText = '号码校验···';
             var regBox = {
              regMobile: /^0?1[3|4|5|8][0-9]\d{8}$/ // 手机号码正则表达式
            };
            setTimeout(() => {
              if (this.formTop.phone === '') {
                wx.showToast({
                  title: '手机号码为空！',
                  duration: 2000,
                  icon: 'none'
                });
              } else if (!regBox.regMobile.test(this.formTop.phone)){
                wx.showToast({
                  title: '手机号码格式不正确！',
                  duration: 2000,
                  icon: 'none'
                });
              } else {
                 this.matters = true;
              }
              this.phoneText = '下一步';
            }, 2000);
          },
          // 再次获取短信验证
          getNote () {
            if (this.showTime) {
              wx.showToast({
                title: '发送短信验证间隔60秒！',
                duration: 2000,
                icon: 'none'
              });
            } else {
              this.gain = '短信获取中···';
              setTimeout(() => {
                wx.showToast({
                  title: '验证码以发送，请注意查看手机！',
                  duration: 2000,
                  icon: 'none'
                });
                this.gain = '重新获取';
                this.showTime = true;
                this.gainTime--;
              }, 2000);
            }
          }
        }
    };
</script>

<style lang="stylus" scoped>
    .store-info
      width 80%; margin 0 auto;
    .info-write
      i
       color #22B14A; font-size 20px;
    #register
        position fixed; top 0; left 0; width 100%; height 100%; background #fff;
        img
            display: block;width: 80px;margin: 45px auto 0 auto;text-align: center; height 80px;
        section
          display flex;align-items center;
          a
            font-size 12px; color #A5A5A5;
        aside
            display flex; align-items center;
            i
              font-size 20px;
            p
              color #a5a5a5; font-size 12px;
        input
          font-size 14px; padding-left 15px;
      .sms-verification
          padding 0; background-color:transparent;  border-bottom: 1px solid #CBCBCB;  font-size:30px;  color:rgba(82,82,82,1);  line-height: 40px;  text-align: center; width:8%; height: 40px;
      .close
          margin-top: 80px; display: block;  text-align: center; font-size: 18px;
.closes
  font-size: 20px;  color: #fff;  text-align: center;position:fixed; width:100%;z-index:2000; margin:0 auto; left:0; bottom:10%;
.code-style
  display inline-block; border-radius 3px; margin 10px  0  0 0; border 1px solid #22B14A; color #22B14A; padding 4px 9px;
</style>
<style lang="stylus">
  .fp-button
    margin 15px  0  0 0!important;
</style>
